<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>直接购买</title>
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,300,400" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 <link rel="stylesheet" href="css/checkout.css">

  
</head>

<body>
  <a id="codepen-link" href="http://www.codepen.io/seanfree" target="_blank"></a>
<div class="wrapper">
  <div class="cart-display">
    <div class="cart-icon">
      <input class="cart-toggle" type="checkbox" name="cart-toggle" id="cart-toggle"/>
      <label class="lbl-cart-toggle" for="cart-toggle"></label>
      <div class="close-icon"></div>
    </div>
    <div class="cart-inner">
      <h2 class="title">购物车</h2>
      <ul class="cart-items">
        <li class="cart-item" id="item-1"><span class="item-image"></span>
          <ul class="item-info">
            <li class="item-name"> <a href="images/presentation-10.jpg">星球大战3</a></li>
            <li class="item-year">2016</li>
            <li class="item-desc">克隆人战争4年后已经接近尾声，但是新的威胁正悄悄来临。</li>
          </ul>
          <p class="item-price">￥59.99</p>
        </li>
      </ul>
    </div>
  </div>
  <form class="form-checkout" action="?" method="post">
    <h2 class="title">直接付款</h2>
    <h3 class="total">￥59.99</h3>
    <div class="payment-select">
      <h3>付款方式</h3>
      <input class="r-type r-visa" type="radio" name="payment-type" id="p-visa" value="visa" checked="checked"/>
      <label class="p-label lbl-visa" for="p-visa"></label>
      <input class="r-type r-mcard" type="radio" name="payment-type" id="p-mcard" value="mcard"/>
      <label class="p-label lbl-mcard" for="p-mcard"></label>
      <input class="r-type r-amex" type="radio" name="payment-type" id="p-amex" value="amex"/>
      <label class="p-label lbl-amex" for="p-amex"></label>
      <input class="r-type r-disc" type="radio" name="payment-type" id="p-disc"/>
      <label class="p-label lbl-disc" for="p-disc"></label>
      <div class="selector"></div>
    </div>
    <div class="card">
      <div class="card-type"></div>
      <div class="card-info">
        <input class="c-info-input c-in-num" type="text" name="card-num" placeholder="卡号" maxlength="16"/>
        <div>
          <input class="c-info-input c-in-name" type="text" name="name" placeholder="持卡人姓名"/>
          <input class="c-info-input c-in-date-m" type="text" name="date-m" placeholder="mm" maxlength="2"/><span class="slash">/</span>
          <input class="c-info-input c-in-date-y" type="text" name="date-m" placeholder="yy" maxlength="2"/>
        </div>
        <input class="c-info-input c-in-cvv" type="text" name="cvv" placeholder="cvv" maxlength="3"/>
      </div>
    </div>
    <div class="buttons">
      <input class="btn-checkout" type="submit" name="btn-checkout" value="立即付款"/>
    </div>
  </form>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

    <script src="js/checkout.js"></script>

</body>
</html>
